<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back();"></div>
      <div class="name">{{tt}}</div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>

    <div class="nav-tab">
    	<div class="tt">
    		<span :class="{'active' : bookState == index}" @click="setBookState(index)" v-for="(item,index) in stateList.val">{{item.name}}</span>
    	</div>
    	<div class="tab-list">
    		<div class="state" v-for="(item,index) in typeList">
    			<span class="all" :class="{'active' : bookType[index] == null}" @click="setBookType(index,null)">全部</span>
    			<div class="list">
    				<span :class="{'active' : bookType[index] == subIndex}" @click="setBookType(index,subIndex)" v-for="(subItem,subIndex) in item.val">{{subItem.name}}</span>
    			</div>
    		</div>

    	</div>
    </div>
    <div class="book-list"
      v-infinite-scroll="loadBottom"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10">
    	<router-link :to="{path:'/bookdetails/'+item.id}" v-for="item in list">
            <div class="layout1-box">
              <img :src="item.cover ? item.cover : errorBookDefaultImg" class="item-l" :onerror="errorBookDefaultImg">
              <div class="item-r">
                  <h3 class="item-tt">{{item.title}}</h3>
                  <p class="item-desc">{{item.intro}}</p>
                  <p class="item-info">
                    <span>{{item.author}}</span>
                    <span class="label">
                      <i class="blue">上架时间:{{item.create_time}}</i>
                    </span>
                  </p>
              </div>
            </div>
        </router-link>
    </div>
    <div class="loadmore-down">
        <span>{{loadNoData ?'暂无更多数据了!' : '加载中...'}}</span>
    </div>

    <!-- 底部 -->
    <web-footer active="enjoy"></web-footer>
  </div>
</template>
<script>
  import bookDefaultImg from '@/assets/images/book.png';
	import WebFooter from '../PUBLIC/footer.vue';
    export default {
    	name: 'typeBook',
    	components: {
    		WebFooter
	    },
    	data () {
      		return {
      			list:[],
            stateList:[],
            typeList:[],
            tt:'',
            bookState:0,
            bookType:[],
            page:0,
            loading:true,
            loadNoData:false,
            errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
	      	}
	    },
      created(){
          this.$axios.post(
              this.$store.state.url+"search_class_item?device_sn="+this.$store.state.device,
              {device_sn:this.$store.state.device}).then(res=>{
                this.typeList = res.data.list;
                this.stateList = res.data.list[0];
                this.typeList.splice(0,1);
                for(let i =0;i<this.typeList.length;i++){
                  this.bookType[i] = null;
                }

                this.loading = false;
                this.loadBottom();
          });   
      },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          setBookState(val){
            this.list = [];
            this.page = 0;
            this.bookState = val;
            this.loadBottom();
          },
          setBookType(index,val){
            this.list = [];
            this.page = 0;
            this.$set(this.bookType,index,val);
            this.loadBottom();
          },
          loadBottom(){
            this.loading = true;
            let arr = [];
            arr.push({field:this.stateList.val[this.bookState].field,'value':this.stateList.val[this.bookState].id});
            for(let i = 0;i<this.typeList.length;i++){
              let field = this.bookType[i] == null ? 0 : this.typeList[i].val[this.bookType[i]].field;
              let value = this.bookType[i] == null ? 0 : this.typeList[i].val[this.bookType[i]].id;
              arr.push({field:field,value:value});
            }
            this.$axios.post(
                this.$store.state.url+"novel_list?device_sn="+this.$store.state.device,
                {class_id:this.$route.params.id,sort_arr:arr,offset:this.list.length,limit:5}).then(res=>{
                  this.tt = res.data.class_name;
                  this.list = this.list.concat(res.data.list);
                  if(res.data.list.length>=5){
                    this.loading = false;
                    ++this.page;
                  }else{
                    this.loadNoData = true;
                  }
            });
          }
	    }
  	}
</script>
<style lang="scss" scoped>
	.book-list{
		padding:30px 30px 20px;
		a{
			display: block;
			margin-bottom:50px;
		}
    a:last-child{
      margin-bottom:0;
    }
	}
	.nav-tab{
		padding:0 30px;
		.tt{
			margin:20px 0;
			span{
				line-height:50px;
				font-size:28px;
				position: relative;
				width:140px;
				text-align: center;
				margin-right:10px;
				display: inline-block;
				border-radius:50px;
			}
			.active{
				color:#fff;
				background-color: #3471ff;
			}
		}
		.tab-list{
			margin-top:30px;
			.state{
				position: relative;
				.all{
					position: absolute;
					top:0;
					left:0;
				}
				.list{
					padding-left:110px;
				}
			}
			span{
				padding:0 15px;
				text-align: center;
				line-height:50px;
				border-radius:50px;
				display: inline-block;
				margin-bottom:20px;
				margin-right:5px;
				&.active{
					background:#3471ff;
					color:#fff;
				}
			}
		}
	}
</style>
